<template>
  <div class="cart">
    <h2>购物车</h2>
    
    <div v-if="cartItems.length === 0">
      <p>您的购物车为空。</p>
    </div>
    
    <div v-else>
      <ul>
        <li v-for="item in cartItems" :key="item.id">
          {{ item.name }} - ￥{{ item.price }} 
          x {{ item.quantity }}
          <button @click="decrementQuantity(item.id)">-</button>
          <button @click="incrementQuantity(item.id)">+</button>
          <button @click="removeFromCart(item.id)">移除</button>
        </li>
      </ul>
      
      <h3>总价: ￥{{ totalPrice }}</h3>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  name: 'Cart',
  computed: {
    ...mapGetters(['cartItems', 'totalPrice'])
  },
  methods: {
    ...mapActions(['removeFromCart', 'incrementQuantity', 'decrementQuantity'])
  }
}
</script>

<style scoped>
.cart {
  border: 1px solid #ccc;
  padding: 1em;
  margin: 1em;
  max-width: 400px;
}
</style>